<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="bg-circle circle-1"></div>
      <div class="bg-circle circle-2"></div>
      <div class="bg-circle circle-3"></div>
    </div>

    <!-- 登录卡片 -->
    <div class="login-card">
      <!-- Logo和标题 -->
      <div class="login-header">
        <div class="logo-section">
          <div class="logo-icon">
            <el-icon size="40"><House /></el-icon>
          </div>
          <div class="logo-text">
            <h1>医院管理平台</h1>
            <p>InterHospital Management System</p>
          </div>
        </div>
        <div class="header-subtitle">
          <span>欢迎回来，请选择登录方式</span>
        </div>
      </div>

      <!-- 登录方式切换 -->
      <div class="login-tabs">
        <div
          class="tab-item"
          :class="{ active: loginType === 'password' }"
          @click="switchLoginType('password')"
        >
          <el-icon><Lock /></el-icon>
          <span>密码登录</span>
        </div>
        <div
          class="tab-item"
          :class="{ active: loginType === 'face' }"
          @click="switchLoginType('face')"
        >
          <el-icon><Camera /></el-icon>
          <span>人脸登录</span>
        </div>
      </div>

      <!-- 密码登录表单 -->
      <div v-show="loginType === 'password'" class="login-content">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          size="large"
        >
          <el-form-item prop="username">
            <div class="input-wrapper">
              <el-icon class="input-icon"><User /></el-icon>
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                clearable
                class="custom-input"
              />
            </div>
          </el-form-item>

          <el-form-item prop="password">
            <div class="input-wrapper">
              <el-icon class="input-icon"><Lock /></el-icon>
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                show-password
                clearable
                class="custom-input"
                @keyup.enter="handleLogin"
              />
            </div>
          </el-form-item>

          <el-form-item class="login-options">
            <el-checkbox v-model="loginForm.remember" class="remember-checkbox">
              记住密码
            </el-checkbox>
            <el-link type="primary" :underline="false" class="forgot-link">
              忘记密码？
            </el-link>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              class="login-btn"
              :loading="loading"
              @click="handleLogin"
            >
              <span v-if="!loading">
                <el-icon><Right /></el-icon>
                立即登录
              </span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 人脸登录区域 -->
      <div v-show="loginType === 'face'" class="face-login-content">
        <div class="face-login-area">
          <div class="camera-container" :class="{ scanning: faceScanning }">
            <div class="camera-preview" ref="cameraPreview">
              <el-icon class="camera-icon" size="60"><Camera /></el-icon>
              <div class="scan-line" v-if="faceScanning"></div>
            </div>
            <div class="scan-corners">
              <div class="corner top-left"></div>
              <div class="corner top-right"></div>
              <div class="corner bottom-left"></div>
              <div class="corner bottom-right"></div>
            </div>
          </div>

          <div class="face-login-tips">
            <p v-if="!faceScanning">请将面部对准摄像头进行识别</p>
            <p v-else class="scanning-text">正在识别中，请保持姿势...</p>
          </div>

          <div class="face-login-actions">
            <el-button
              v-if="!faceScanning"
              type="primary"
              class="face-login-btn"
              @click="startFaceLogin"
            >
              <el-icon><VideoCamera /></el-icon>
              开始人脸识别
            </el-button>
            <el-button
              v-else
              class="face-login-btn scanning"
              @click="stopFaceLogin"
            >
              <el-icon><Close /></el-icon>
              取消识别
            </el-button>
          </div>
        </div>

        <!-- 人脸登录说明 -->
        <div class="face-login-note">
          <el-alert
            title="人脸登录说明"
            type="info"
            :closable="false"
            show-icon
          >
            <template #default>
              <ul class="note-list">
                <li>确保光线充足，面部清晰可见</li>
                <li>请正对摄像头，避免侧脸或遮挡</li>
                <li>首次使用需要先录入人脸信息</li>
              </ul>
            </template>
          </el-alert>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="login-footer">
        <div class="feature-tags">
          <div class="tag-item">
            <el-icon><Checked /></el-icon>
            <span>安全可靠</span>
          </div>
          <div class="tag-item">
            <el-icon><Connection /></el-icon>
            <span>云端部署</span>
          </div>
          <div class="tag-item">
            <el-icon><Timer /></el-icon>
            <span>7×24服务</span>
          </div>
        </div>
        <div class="copyright">
          <p>© 2024 互联网医院管理平台 · 专业版 v2.0</p>
        </div>
      </div>
    </div>

    <!-- 侧边功能介绍 -->
    <div class="feature-panel">
      <div class="panel-content">
        <div class="panel-header">
          <h2>数字化医院管理</h2>
          <p>新一代智能医疗管理解决方案</p>
        </div>

        <div class="feature-list">
          <div
            class="feature-item"
            v-for="feature in features"
            :key="feature.id"
          >
            <div class="feature-icon">
              <el-icon><component :is="feature.icon" /></el-icon>
            </div>
            <div class="feature-info">
              <h4>{{ feature.title }}</h4>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </div>

        <div class="panel-stats">
          <div class="stat-item">
            <span class="stat-number">500+</span>
            <span class="stat-label">合作医院</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">99.9%</span>
            <span class="stat-label">系统可用性</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import {
  House,
  Lock,
  Camera,
  User,
  Right,
  VideoCamera,
  Close,
  Checked,
  Connection,
  Timer,
} from "@element-plus/icons-vue";
import request from "../utils/request";
import { useUserStore } from "../stores/user";

const router = useRouter();
const userStore = useUserStore();

// 响应式数据
const loading = ref(false);
const loginFormRef = ref<FormInstance>();
const loginType = ref<"password" | "face">("password");
const faceScanning = ref(false);

const loginForm = reactive({
  username: "",
  password: "",
  remember: false,
});

// 功能特性列表
const features = ref([
  {
    id: 1,
    icon: "User",
    title: "智能排班",
    description: "AI辅助医生排班，提高工作效率",
  },
  {
    id: 2,
    icon: "Timer",
    title: "预约管理",
    description: "在线预约挂号，减少排队等待",
  },
  {
    id: 3,
    icon: "Lock",
    title: "电子病历",
    description: "无纸化病历管理，信息安全可靠",
  },
  {
    id: 4,
    icon: "Connection",
    title: "数据分析",
    description: "实时统计分析，辅助决策管理",
  },
]);

// 表单验证规则
const loginRules: FormRules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    {
      min: 3,
      max: 20,
      message: "用户名长度在 3 到 20 个字符",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度在 6 到 20 个字符", trigger: "blur" },
  ],
};

// 切换登录方式
const switchLoginType = (type: "password" | "face") => {
  loginType.value = type;
  if (type === "password") {
    stopFaceLogin();
  }
};

// 开始人脸登录
const startFaceLogin = async () => {
  try {
    faceScanning.value = true;
    ElMessage.info("人脸识别功能开发中，敬请期待...");

    // TODO: 这里集成人脸识别功能
    // 1. 调用摄像头
    // 2. 捕获人脸图像
    // 3. 发送到后端进行识别
    // 4. 处理识别结果

    // 模拟识别过程
    setTimeout(() => {
      faceScanning.value = false;
      ElMessage.warning("人脸识别功能正在开发中");
    }, 3000);
  } catch (error) {
    faceScanning.value = false;
    ElMessage.error("启动人脸识别失败");
  }
};

// 停止人脸登录
const stopFaceLogin = () => {
  faceScanning.value = false;
  // TODO: 停止摄像头
};

// 登录处理
const handleLogin = async () => {
  if (!loginFormRef.value) return;

  try {
    const valid = await loginFormRef.value.validate();
    if (!valid) return;

    loading.value = true;

    // 调用后端登录接口
    const response: any = await request({
      url: "/jjx/login",
      method: "POST",
      data: {
        username: loginForm.username,
        password: loginForm.password,
      },
    });

    // 登录成功
    if (response.success) {
      // 检查返回的token字段
      if (!response.data.accessToken || !response.data.refreshToken) {
        console.error("Token字段缺失:", response.data);
        ElMessage.error("登录响应数据异常，请检查后端接口");
        return;
      }

      // 保存双token到store和localStorage
      userStore.setTokens(
        response.data.accessToken,
        response.data.refreshToken
      );

      // 保存用户信息，包含完整的角色和权限
      userStore.setUserInfo({
        id: response.data.userId,
        username: response.data.username,
        name: response.data.username,
        email: "",
        role: response.data.roles?.[0]?.code || "admin", // 兼容旧代码
        roles: response.data.roles || [],
        permissions: response.data.permissions || [],
      });

      // 如果选择记住密码，保存到localStorage
      if (loginForm.remember) {
        localStorage.setItem("remembered-username", loginForm.username);
        localStorage.setItem("remembered-password", loginForm.password);
      } else {
        localStorage.removeItem("remembered-username");
        localStorage.removeItem("remembered-password");
      }

      ElMessage.success(response.message || "登录成功！");

      // 跳转到首页
      setTimeout(() => {
        router.push("/home");
      }, 200);
    } else {
      ElMessage.error(response.message || "登录失败！");
    }
  } catch (error: any) {
    console.error("登录错误:", error);
  } finally {
    loading.value = false;
  }
};

// 页面加载时，如果有记住的密码，自动填充
const initForm = () => {
  const rememberedUsername = localStorage.getItem("remembered-username");
  const rememberedPassword = localStorage.getItem("remembered-password");

  if (rememberedUsername && rememberedPassword) {
    loginForm.username = rememberedUsername;
    loginForm.password = rememberedPassword;
    loginForm.remember = true;
  }
};

// 初始化
initForm();
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #2196f3 0%, #21cbf3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;

  // 背景装饰
  .bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;

    .bg-circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      animation: float 6s ease-in-out infinite;

      &.circle-1 {
        width: 200px;
        height: 200px;
        top: 10%;
        left: 10%;
        animation-delay: 0s;
      }

      &.circle-2 {
        width: 300px;
        height: 300px;
        top: 60%;
        right: 10%;
        animation-delay: 2s;
      }

      &.circle-3 {
        width: 150px;
        height: 150px;
        bottom: 20%;
        left: 30%;
        animation-delay: 4s;
      }
    }
  }

  // 登录卡片
  .login-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 420px;
    padding: 40px;
    position: relative;
    z-index: 2;

    .login-header {
      text-align: center;
      margin-bottom: 25px;

      .logo-section {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;

        .logo-icon {
          width: 60px;
          height: 60px;
          background: linear-gradient(135deg, #2196f3, #21cbf3);
          border-radius: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          color: white;
          box-shadow: 0 8px 20px rgba(33, 150, 243, 0.3);
        }

        .logo-text {
          text-align: left;

          h1 {
            font-size: 24px;
            font-weight: 700;
            color: #2d3748;
            margin: 0 0 5px 0;
          }

          p {
            font-size: 12px;
            color: #718096;
            margin: 0;
            letter-spacing: 0.5px;
          }
        }
      }

      .header-subtitle {
        span {
          color: #4a5568;
          font-size: 14px;
        }
      }
    }

    .login-tabs {
      display: flex;
      background: #f7fafc;
      border-radius: 10px;
      padding: 5px;
      margin-bottom: 30px;

      .tab-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 20px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #718096;
        font-size: 14px;
        font-weight: 500;

        .el-icon {
          margin-right: 8px;
        }

        &:hover {
          background: rgba(33, 150, 243, 0.1);
          color: #2196f3;
        }

        &.active {
          background: white;
          color: #2196f3;
          box-shadow: 0 2px 10px rgba(33, 150, 243, 0.1);
        }
      }
    }

    .login-content {
      .login-form {
        .input-wrapper {
          position: relative;

          .input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #a0aec0;
            z-index: 3;
          }

          .custom-input {
            // 强制设置输入框容器宽度
            width: 100% !important;

            :deep(.el-input__wrapper) {
              border-radius: 12px;
              border: 2px solid #e2e8f0;
              box-shadow: none;
              padding-left: 45px;
              height: 50px;
              width: 100% !important;
              display: flex !important;
              align-items: center;

              &:hover {
                border-color: #cbd5e0;
              }

              &.is-focus {
                border-color: #2196f3;
                box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
              }
            }

            // 固定输入框主体宽度
            :deep(.el-input__inner) {
              flex: 1;
              padding-right: 80px !important;
              border: none !important;
              outline: none !important;
              background: transparent !important;
            }

            // 固定右侧图标区域宽度
            :deep(.el-input__suffix) {
              position: absolute !important;
              right: 0 !important;
              top: 0 !important;
              bottom: 0 !important;
              width: 80px !important;
              display: flex !important;
              align-items: center;
              justify-content: flex-end;
              padding-right: 12px;
              background: transparent;
            }

            // 确保clearable图标始终有位置
            :deep(.el-input__suffix-inner) {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }

        .login-options {
          margin: 20px 0;

          :deep(.el-form-item__content) {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .remember-checkbox {
            :deep(.el-checkbox__label) {
              color: #4a5568;
              font-size: 14px;
            }
          }

          .forgot-link {
            font-size: 14px;
            text-decoration: none;
          }
        }

        .login-btn {
          width: 100%;
          height: 50px;
          border-radius: 12px;
          background: linear-gradient(135deg, #2196f3, #21cbf3);
          border: none;
          font-size: 16px;
          font-weight: 600;
          letter-spacing: 0.5px;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(33, 150, 243, 0.3);
          }

          :deep(.el-icon) {
            margin-right: 8px;
          }
        }
      }
    }

    .face-login-content {
      .face-login-area {
        text-align: center;

        .camera-container {
          position: relative;
          width: 180px;
          height: 180px;
          margin: 0 auto 15px;
          border-radius: 20px;
          overflow: hidden;
          background: #f7fafc;
          transition: all 0.3s ease;

          &.scanning {
            background: linear-gradient(135deg, #2196f3, #21cbf3);
          }

          .camera-preview {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            .camera-icon {
              color: #a0aec0;
              transition: all 0.3s ease;
            }

            .scan-line {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              height: 2px;
              background: #ffffff;
              animation: scanLine 2s ease-in-out infinite;
            }
          }

          .scan-corners {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

            .corner {
              position: absolute;
              width: 20px;
              height: 20px;
              border: 3px solid #2196f3;

              &.top-left {
                top: 10px;
                left: 10px;
                border-right: none;
                border-bottom: none;
              }

              &.top-right {
                top: 10px;
                right: 10px;
                border-left: none;
                border-bottom: none;
              }

              &.bottom-left {
                bottom: 10px;
                left: 10px;
                border-right: none;
                border-top: none;
              }

              &.bottom-right {
                bottom: 10px;
                right: 10px;
                border-left: none;
                border-top: none;
              }
            }
          }

          &.scanning {
            .camera-icon {
              color: white;
            }

            .scan-corners .corner {
              border-color: #ffffff;
            }
          }
        }

        .face-login-tips {
          margin-bottom: 15px;

          p {
            color: #4a5568;
            font-size: 14px;
            margin: 0;

            &.scanning-text {
              color: #2196f3;
              font-weight: 500;
            }
          }
        }

        .face-login-actions {
          .face-login-btn {
            width: 100%;
            height: 50px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;

            &:not(.scanning) {
              background: linear-gradient(135deg, #2196f3, #21cbf3);
              border: none;
              color: white;

              &:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 25px rgba(33, 150, 243, 0.3);
              }
            }

            &.scanning {
              background: #e2e8f0;
              border: 2px solid #cbd5e0;
              color: #4a5568;

              &:hover {
                background: #edf2f7;
              }
            }

            :deep(.el-icon) {
              margin-right: 8px;
            }
          }
        }
      }

      .face-login-note {
        margin-top: 20px;

        :deep(.el-alert) {
          border-radius: 10px;
          border: none;
          background: #e3f2fd;

          .el-alert__content {
            .el-alert__title {
              color: #2196f3;
              font-size: 14px;
              font-weight: 600;
              margin-bottom: 8px;
            }
          }
        }

        .note-list {
          margin: 0;
          padding-left: 16px;
          color: #4a5568;
          font-size: 13px;
          line-height: 1.6;

          li {
            margin-bottom: 4px;
          }
        }
      }
    }

    .login-footer {
      margin-top: 25px;
      text-align: center;

      .feature-tags {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 20px;

        .tag-item {
          display: flex;
          align-items: center;
          color: #718096;
          font-size: 12px;

          .el-icon {
            margin-right: 4px;
            font-size: 14px;
          }
        }
      }

      .copyright {
        p {
          color: #a0aec0;
          font-size: 12px;
          margin: 0;
        }
      }
    }
  }

  // 侧边功能介绍
  .feature-panel {
    flex: 1;
    max-width: 500px;
    margin-left: 200px;
    color: white;
    z-index: 2;
    position: relative;

    .panel-content {
      .panel-header {
        margin-bottom: 40px;

        h2 {
          font-size: 36px;
          font-weight: 700;
          margin: 0 0 10px 0;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        p {
          font-size: 18px;
          margin: 0;
          opacity: 0.9;
        }
      }

      .feature-list {
        margin-bottom: 50px;

        .feature-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 30px;
          opacity: 0.9;

          .feature-icon {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            flex-shrink: 0;

            .el-icon {
              font-size: 24px;
            }
          }

          .feature-info {
            h4 {
              font-size: 18px;
              font-weight: 600;
              margin: 0 0 8px 0;
            }

            p {
              font-size: 14px;
              margin: 0;
              opacity: 0.8;
              line-height: 1.5;
            }
          }
        }
      }

      .panel-stats {
        display: flex;
        gap: 40px;

        .stat-item {
          text-align: center;

          .stat-number {
            display: block;
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 5px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
          }

          .stat-label {
            font-size: 14px;
            opacity: 0.8;
          }
        }
      }
    }
  }
}

// 动画效果
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes scanLine {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0.3;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .login-container {
    .feature-panel {
      display: none;
    }
  }
}

@media (max-width: 768px) {
  .login-container {
    padding: 10px;

    .login-card {
      margin: 0;
      max-width: 100%;
      padding: 25px 20px;

      .login-header {
        margin-bottom: 20px;
      }

      .login-tabs {
        margin-bottom: 20px;
      }

      .face-login-content {
        .face-login-area {
          .camera-container {
            width: 160px;
            height: 160px;
            margin-bottom: 12px;
          }

          .face-login-tips {
            margin-bottom: 12px;
          }
        }

        .face-login-note {
          margin-top: 18px;
        }
      }

      .login-footer {
        margin-top: 20px;
      }
    }

    .bg-decoration .bg-circle {
      opacity: 0.5;
    }
  }
}

@media (max-width: 480px) {
  .login-container .login-card {
    padding: 20px 15px;

    .login-header {
      margin-bottom: 18px;

      .logo-section {
        margin-bottom: 15px;

        .logo-icon {
          width: 50px;
          height: 50px;
          margin-right: 10px;
        }

        .logo-text h1 {
          font-size: 20px;
        }
      }
    }

    .login-tabs {
      margin-bottom: 18px;
    }

    .face-login-content {
      .face-login-area {
        .camera-container {
          width: 140px;
          height: 140px;
          margin-bottom: 10px;
        }

        .face-login-tips {
          margin-bottom: 10px;
        }
      }

      .face-login-note {
        margin-top: 15px;
      }
    }

    .login-footer {
      margin-top: 15px;
    }
  }
}

// 针对高度受限的屏幕优化 - 确保一屏显示
@media (max-height: 750px) {
  .login-container .login-card {
    padding: 30px 40px 25px;

    .login-header {
      margin-bottom: 22px;

      .logo-section {
        margin-bottom: 15px;
      }
    }

    .login-tabs {
      margin-bottom: 22px;
    }

    .face-login-content {
      .face-login-area {
        .camera-container {
          width: 160px;
          height: 160px;
          margin-bottom: 12px;
        }

        .face-login-tips {
          margin-bottom: 12px;
        }
      }

      .face-login-note {
        margin-top: 18px;
      }
    }

    .login-footer {
      margin-top: 22px;
    }
  }
}

@media (max-height: 680px) {
  .login-container .login-card {
    padding: 25px 40px 20px;

    .login-header {
      margin-bottom: 18px;

      .logo-section {
        margin-bottom: 12px;

        .logo-icon {
          width: 50px;
          height: 50px;
        }

        .logo-text h1 {
          font-size: 22px;
        }
      }
    }

    .login-tabs {
      margin-bottom: 18px;
    }

    .face-login-content {
      .face-login-area {
        .camera-container {
          width: 140px;
          height: 140px;
          margin-bottom: 10px;
        }

        .face-login-tips {
          margin-bottom: 10px;
        }
      }

      .face-login-note {
        margin-top: 15px;

        :deep(.el-alert) {
          .note-list {
            font-size: 12px;
            line-height: 1.4;
          }
        }
      }
    }

    .login-footer {
      margin-top: 18px;

      .feature-tags {
        gap: 15px;
        margin-bottom: 15px;
      }
    }
  }
}

// 非常小的高度优化
@media (max-height: 600px) {
  .login-container .login-card {
    padding: 20px 40px 15px;

    .login-header {
      margin-bottom: 15px;

      .logo-section {
        margin-bottom: 10px;

        .logo-icon {
          width: 45px;
          height: 45px;
        }

        .logo-text {
          h1 {
            font-size: 20px;
            margin-bottom: 3px;
          }

          p {
            font-size: 11px;
          }
        }
      }
    }

    .login-tabs {
      margin-bottom: 15px;

      .tab-item {
        padding: 10px 16px;
        font-size: 13px;
      }
    }

    .face-login-content {
      .face-login-area {
        .camera-container {
          width: 120px;
          height: 120px;
          margin-bottom: 8px;
        }

        .face-login-tips {
          margin-bottom: 8px;

          p {
            font-size: 13px;
          }
        }

        .face-login-actions {
          .face-login-btn {
            height: 45px;
            font-size: 14px;
          }
        }
      }

      .face-login-note {
        margin-top: 12px;

        :deep(.el-alert) {
          .el-alert__title {
            font-size: 13px;
          }

          .note-list {
            font-size: 11px;
            line-height: 1.3;
          }
        }
      }
    }

    .login-footer {
      margin-top: 15px;

      .feature-tags {
        gap: 12px;
        margin-bottom: 12px;

        .tag-item {
          font-size: 11px;

          .el-icon {
            font-size: 12px;
          }
        }
      }

      .copyright p {
        font-size: 11px;
      }
    }
  }
}
</style>